<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>仿携程旅行移动端</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<!-- 引入初始化样式文件 -->
	<link rel="stylesheet" href="css/base.css">
	<!-- 引入轮播图样式文件 -->
	<link rel="stylesheet" href="css/swiper.min.css">
	<!-- 引入index.css样式文件 -->
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	测试SSH免登陆协议
	<!-- 头部开始 -->
	<div class="header">
		<div class="search">
			搜索:目的地/酒店/经典/航班号
		</div>
		<div class="user">
			我&nbsp;的
		</div>
	</div>
	<script src="js/app.js"></script>
	<!-- 头部结束 -->

	<!-- 轮播图开始 -->
	<div class="banner">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="#"><img src="./images/banner01.jpg"></a>
				</div>
				<div class="swiper-slide">
					<a href="#"><img src="./images/banner02.jpg"></a>
				</div>
				<div class="swiper-slide">
					<a href="#"><img src="./images/banner03.jpg"></a>
				</div>
				<div class="swiper-slide">
					<a href="#"><img src="./images/banner04.jpg"></a>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
	</div>

	<!-- 引入轮播图js文件 -->
	<script src="js/swiper.min.js"></script>
	<script>        
		var mySwiper = new Swiper ('.swiper-container', {
			direction: 'horizontal', // 横向切换选项
			loop: true, // 循环模式选项
			
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			autoplay: {
				delay: 2000,//2秒切换一次
			}
		})        
	</script>
	<!-- 轮播图结束 -->


	<!-- 导航1开始 -->
	<div class="local-nav">
		<ul>
			<li><a href="#"><span class="icon"></span>攻略·经典</a></li>
			<li><a href="#"><span class="icon"></span>门票·玩乐</a></li>
			<li><a href="#"><span class="icon"></span>美食林</a></li>
			<li><a href="#"><span class="icon"></span>周边游</a></li>
			<li><a href="#"><span class="icon"></span>一日游</a></li>
		</ul>
	</div>
	<!-- 导航1结束 -->

	<!-- 导航2开始 -->
	<div class="nav">
		<div class="grid-nav-common grid-nav-hotel">
			<a href="#">酒店</a>
			<a href="#">民宿·客栈</a>
			<a href="#">火车票</a>
			<a href="#">机票</a>
		</div>
		<div class="grid-nav-common grid-nav-flight">
			<a href="#">机票</a>
			<a href="#">火车票</a>
			<a href="#">汽车·船票</a>
			<a href="#">专车·租车</a>
		</div>
		<div class="grid-nav-common grid-nav-travel">
			<a href="#">旅游</a>
			<a href="#">高铁游</a>
			<a href="#">邮轮游</a>
			<a href="#">定制游</a>
		</div>
	</div>
	<!-- 导航2结束 -->

	<!-- 导航3开始 -->
	<div class="subnav-entry">
		<ul>
			<li><a href="#"><span class="icon"></span>自由行</a></li>
			<li><a href="#"><span class="icon"></span>WiFi电话卡</a></li>
			<li><a href="#"><span class="icon"></span>保险·签证</a></li>
			<li><a href="#"><span class="icon"></span>换钞·购物</a></li>
			<li><a href="#"><span class="icon"></span>当地向导</a></li>
			<li><a href="#"><span class="icon"></span>特价机票</a></li>
			<li><a href="#"><span class="icon"></span>礼品卡</a></li>
			<li><a href="#"><span class="icon"></span>申卡·借钱</a></li>
			<li><a href="#"><span class="icon"></span>旅拍<span class="new">NEW</span></a></li>
			<li><a href="#"><span class="icon"></span>更多</a></li>
		</ul>
	</div>
	<!-- 导航3结束 -->

	<!-- 特卖汇开始 -->
	<div class="temaihui">
		<div class="title">
			<h2></h2>
			<a href="#">更多</a>
		</div>

		<div class="content">
			<div class="left">
				<a href="#">
					<img src="./images/pic-tmh-01.jpg">
					<p>三亚5日自由行(5钻)·节后错峰款【高星度假型酒店合辑·4晚连住】预订赠出行礼遇·网红酒店|唯美海滩|亲子宅玩|海鲜盛宴|惬意泳池|热剧取景地·暖秋当红旅行地 累计超6万人真实出行！</p>
					<span class="price">1504</span>
				</a>
			</div>
			<div class="right">
				<div class="top">
					<a href="#">
						<dl>
							<dt>千款特价</dt>
							<dd>走过路过不错过</dd>
						</dl>
						<img src="./images/pic-tmh-02.png" width="54">
					</a>
				</div>
				<div class="bottom">
					<div class="one">
						<a href="#">
							<p>境外精选</p>
							<p>限时抢购</p>
							<img src="./images/pic-tmh-03.png" width="54">
						</a>
					</div>

					<div class="two">
						<a href="#">
							<p>周边玩乐</p>
							<p>欢乐度周末</p>
							<img src="./images/pic-tmh-04.png" width="54">
						</a>
					</div>

				</div>
			</div>
		</div>

	</div>
	<!-- 特卖汇结束 -->

	<!-- 热门活动开始 -->
	<div class="hot_huodong">
		<div class="title">
			<h2></h2>
			<a href="#">获取更多福利</a>
		</div>
		<div class="content">
			<div class="one">
				<img src="images/huodong01.png">
			</div>
			<div class="two">
				<img src="images/huodong02.png">
			</div>
			<div class="three">
				<img src="images/huodong03.jpg">
			</div>
			<div class="four">
				<img src="images/huodong04.jpg">
			</div>
			<div class="five">
				<img src="images/huodong05.jpg">
			</div>
			<div class="six">
				<img src="images/huodong06.jpg">
			</div>
		</div>
	</div>
	<!-- 热门活动结束 -->

	<!-- 底部开始 -->
	<div class="footer">
		<div class="tool-cn">
			<a href="#">
				<span class="iconfont">&#xe60d;</span>
				电话预订
			</a>
			<a href="#">
				<span class="iconfont">&#xe87b;</span>
				下载客户端
			</a>
			<a>
				<span class="iconfont">&#xe665;</span>
				我 的
			</a>
		</div>
		<div class="tool-ver">
			<a>网站地图</a>｜
			<a href="#"><span class="iconfont">&#xe629;</span>Language<span class="iconfont">&#xe642;</span></a>｜
			<a href="#">电脑版</a>
		</div>
		<p class="copyright">
			©2019粤嵌H5前端开发｜<a href="#">粤ICP备XXXXXXXX号-XXXXXX</a>
		</p>
	</div>
	<!-- 底部结束 -->
</body>
</html>